import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, Tree } from 'antd'
import axios from 'axios'
import { OrderedListOutlined, DeleteOutlined } from '@ant-design/icons';

function RoleList() {
    const [dataSource, setdataSource] = useState([])
    const [rightList, setrightList] = useState([])
    const [currentId, setcurrentId] = useState(0)
    const [currentRightList, setcurrentRightList] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    // table显示结构
    const columns = [
        {
            title: "ID",
            dataIndex: "id",
        },
        {
            title: "角色名称",
            dataIndex: "roleName",
        },
        {
            title: "操作",
            dataIndex: "",
            render: (item) => {
                return <div>
                    <Button type="danger" shape="circle" icon={<DeleteOutlined />} onClick={() => deleteConfirm(item)} />
                    <Button type="primary" shape="circle" icon={<OrderedListOutlined />} onClick={() => showModal(item)} />
                </div>
            }
        }
    ]
    // 树形结构
    const treeData = [
        {
            title: 'parent 1',
            key: '0-0',
            children: [
                {
                    title: 'parent 1-0',
                    key: '0-0-0',
                    disabled: true,
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-0-0',
                            disableCheckbox: true,
                        },
                        {
                            title: 'leaf',
                            key: '0-0-0-1',
                        },
                    ],
                },
                {
                    title: 'parent 1-1',
                    key: '0-0-1',
                    children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
                },
            ],
        },
    ];


    //删除确认框
    var deleteConfirm = (item) => {
        console.log(item);
        Modal.confirm({
            title: 'Confirm',
            icon: <DeleteOutlined />,
            content: '确定删除角色？',
            onOk() {
                deleteMethod(item)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    // 执行删除方法
    var deleteMethod = (item) => {
        setdataSource(dataSource.filter(data => data.id !== item.id))
        axios.delete(`/roles/${item.id}`)
    }
    // 获取全部数据
    var getList = async () => {
        var res = await axios.get("/roles")
        console.log(res.data);
        setdataSource(res.data)
    }
    var getRight = async () => {
        var res = await axios.get("/rights?_embed=children")
        console.log(res.data, 'setrightList');
        setrightList(res.data)
    }

    // 树形结构详情
    const showModal = (item) => {
        setIsModalVisible(true);
        setcurrentId(item.id)
        setcurrentRightList(item.rights)
    };

    const handleOk = async () => {
        setIsModalVisible(false);
        setdataSource(dataSource.map((item) => {
            if (item.id === currentId) {
                return {
                    ...item,
                    rights: currentRightList
                };
            }
            return item

        }))
        var res = await axios.patch(`/roles/${currentId}`,{
            rights:currentRightList
        })

    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const onCheck = (checkedKeys) => {
        setcurrentRightList(checkedKeys.checked)
    };
    useEffect(() => {
        getList()
        getRight()
    }, [])
    return (
        <div>
            <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} pagination={{
                pageSize: 5
            }} />
            <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Tree
                    checkable
                    checkedKeys={currentRightList}
                    // onSelect={onSelect}
                    checkStrictly={true}
                    onCheck={onCheck}
                    treeData={rightList}
                />
            </Modal>
        </div>
    )
}

export default RoleList
